<!-- 在script 标签上使用setup，可以不用再使用return的写法了 -->
<!-- 其中 setup 标记的 script 必须是单独的，不能和export等其他共用 -->
<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!--<script lang="ts">
export default {
  name: 'Person',
}
</script>-->

<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!-- 如果没有定义组件名称，没有给script写name定义组件名称的话，默认就是组件的名称。 -->
<script setup lang="ts" name="Person">
import { type Person, type Persons } from '@/types/index.ts'
import { nanoid } from 'nanoid'

// 对应定义对象，实现接口 Person
let person: Person = {
  id: nanoid(),
  name: '张飒飒',
  age: 18,
}
console.log(person)

// 使用数组进行限制，且指定了数组的类型是Person
let personList: Array<Person> = [
  {
    id: nanoid(),
    name: '张飒飒',
    age: 18,
  },
  {
    id: nanoid(),
    name: '李思思',
    age: 18,
  },
  {
    id: nanoid(),
    name: '王舞雾',
    age: 18,
  },
]
console.log(personList)

// 可以使用自定义的类型
let personList2: Persons = [
  {
    id: nanoid(),
    name: '张飒飒',
    age: 18,
  },
  {
    id: nanoid(),
    name: '李思思',
    age: 18,
  },
  {
    id: nanoid(),
    name: '王舞雾',
    age: 18,
  },
]
console.log(personList2)
</script>

<template>
  <div class="person"></div>
</template>

<style scoped>
.person {
  background-color: #dab649;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>
